<template>
  <el-card style="min-height:700px;">
    <el-form ref="startForm" :model="startForm" :rules="rules" label-width="100px">
      <el-form-item label="活动时间">
        <el-radio-group v-model="type" class="start-radio-group">
          <el-radio label="forever">永远进行</el-radio>
          <el-radio label="time">时间段</el-radio>
          <div class="el-upload__tip upload-tip">活动期间可以手动结束</div>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="type === 'time'">
        <el-date-picker
          v-model="startForm.cycle"
          type="datetimerange"
          align="left"
          unlink-panels
          range-separator="|"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width:300px"
        />
      </el-form-item>
      <el-form-item label="分享标题" prop="title">
        <el-input v-model="startForm.title" style="width:400px"/>
      </el-form-item>
      <el-form-item label="分享描述" prop="describe">
        <el-input
          v-model="startForm.description"
          type="textarea"
          placeholder="请输入内容"
          resize="none"
          rows="2"
          style="resize: none;width:400px"
        />
      </el-form-item>
      <el-form-item label="分享图标" class="upload-box">
        <el-upload
          :on-change="handleChange"
          :http-request="uploadFile"
          :limit="1"
          action=""
          class="avatar-uploader"
          list-type="picture-card"
          name="logoImage"
        >
          <i class="el-icon-plus"/>
        </el-upload>
        <div class="el-upload__tip">
          你可以上传jpg、png格式的文件，图片尺寸为200x200像素，文件大小不能超过500K。
          <a href="javascript:;">
            <i class="el-icon-warning cursor-pointer">&nbsp;查看示例图</i>
            <div class="el-popover" style="width: 300px; transform-origin: left center 0px;">
              <img src="../../assets/tinysale_images/share-example.jpg" style="width: 100%;">
              <div x-arrow class="popper__arrow" style="top: 338px;"/>
            </div>
          </a>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="table-cloud__tips">
          <span>注意：本网校云短信剩余条数不足，请即时充值。——</span>
          <a
            href="http://bjtest1.edusoho.cn/admin/edu_cloud/sms/overview"
            target="_blank"
            class="link-primary"
          >去充值</a>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="previewDialogVisible = true">确认</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewDialogVisible" title="开始活动" width="30%">
      <el-form label-width="80px">
        <el-form-item label="开始时间">
          <span v-if="type === 'forever'">永远进行</span>
          <span v-if="type === 'time'">{{ new Date(startForm.cycle[0]).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '') }}</span>
        </el-form-item>
        <el-form-item label="截止时间">
          <span v-if="type === 'forever'">永远进行</span>
          <span v-if="type === 'time'">{{ new Date(startForm.cycle[1]).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '') }}</span>
        </el-form-item>
        <el-form-item label="分享样式">
          <div class="shareBox">
            <div class="share-title">{{ startForm.title }}</div>
            <div class="share-content">
              <div class="share-content-left">{{ startForm.description }}</div>
              <div class="share-content-right">
                <img v-if="startForm.img" :src="startForm.img">
              </div>
            </div>
          </div>
        </el-form-item>
        <div class="share-info">
          <span class="color-warning">*</span>注：生成分享语后
          <strong>无法</strong>再次更改.
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
import { getTenantId, getUserName } from '@/utils/auth'
import { getStartActivity, saveOrUpdateStartActivity } from '@/api/tinysale/addActivity'
import { upLoadFile } from '@/api/upLoadFile'
export default {
  data() {
    return {
      type: 'forever',
      activityId: '',
      startForm: {},
      // 预览展示dialog弹框
      previewDialogVisible: false,
      rules: {
        title: [
          { required: true, message: '请输入分享语标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入分享语简介', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.activityId = this.$route.params.id
    this.getData()
  },
  methods: {
    getData() {
      getStartActivity(this.activityId).then(res => {
        if (res.data.item) {
          this.startForm = res.data.item
        }
      })
    },
    // 图片上传chang回调
    handleChange(file) {
      this.file = file.raw
    },
    uploadFile() {
      const fileForm = new FormData()
      fileForm.append('name', this.file.name)
      fileForm.append('uid', this.file.uid)
      fileForm.append('file', this.file)
      upLoadFile(fileForm).then(response => {
        this.startForm.fileId = response.data.id
        this.startForm.img = response.data.url
      })
    },
    saveInfo() {
      this.previewDialogVisible = false
      this.$refs.startForm.validate((valid) => {
        if (valid) {
          if (!this.startForm.id) {
            this.startForm.activityId = this.activityId
            this.startForm.tenantId = getTenantId()
            this.startForm.creator = getUserName()
          }
          this.startForm.type = this.type
          if (this.startForm.type === 'time') {
            this.startForm.startTime = this.startForm.cycle[0]
            this.startForm.endTime = this.startForm.cycle[1]
          }
          saveOrUpdateStartActivity(this.startForm).then(res => {
            this.$notify({
              title: '成功',
              message: '成功',
              type: 'success',
              duration: 2000
            })
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.hide .el-upload--picture-card {
  display: none;
}
.start-radio-group {
  margin-top: 10px;
}
.el-upload__tip {
  margin-top: 5px;
}
.upload-tip {
  line-height: 12px;
  font-size: 12px;
  color: #8391a5;
}
.el-upload--picture-card:hover .mask {
  display: block;
  bottom: 48px;
}
.mask {
  display: none;
  width: 148px;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
  bottom: 10px;
  text-align: center;
  color: #fff;
}
.upload-box .el-upload__tip {
  width: 420px;
  line-height: 20px;
  a {
    color: #58b7ff;
    position: relative;
    .el-popover {
      display: none;
      position: absolute;
      top: -320px;
      left: 95px;
      background: #fff;
      min-width: 150px;
      border-radius: 2px;
      border: 1px solid #d1dbe5;
      padding: 10px;
      z-index: 9;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    }
  }
  a:hover .el-popover {
    display: block;
  }
}
.table-cloud__tips {
  color: #8391a5;
  a {
    color: #58b7ff;
  }
}
.shareBox {
  width: 240px;
  border: 1px solid #ddd;
  padding: 5px;
  line-height: 1.5;
  margin: 10px 0;
  display: inline-block;
  .share-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 3px;
    color: #48576a;
    font-size: 14px;
  }
  .share-content {
    width: 100%;
    display: flex;
    align-items: center;
    .share-content-left {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 12px;
      color: #919191;
      float: left;
      width: 180px;
    }
    .share-content-right {
      float: right;
      width: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.share-info {
  width: 240px;
  margin: 0 auto;
  color: #919191;
  line-height: 1.5;
  .color-warning {
    color: #ff4949;
  }
}
</style>

